
let laypage = layui.laypage
let layer = layui.layer
let form = layui.form


let list = {
  page: 1,      //	是	int	页码值
  limit: 5,	   //是	int	每页显示多少条数据
  id: '',	   
  state: '', 
}
function fn() {
  axios({
    method: 'get',
    url: 'http://124.223.14.236:8060/admin/ydd_user/list',
    params: list,
    headers: { 'x-token': localStorage.getItem('x-token') }
  }).then(function ({ data: { data: { data, count } } }) {
    // console.log(data,'data')

    // console.log(count,'count');
    const str = data.map(function (item, index) {
      document.querySelector('#number').innerHTML = data.length
      return `
    <tr>
      <td>${index + 1}</td>
      <td>${item.id}</td>
      <td>${item.username}</td>
      <td>${item.mobile}</td>
      <td>${item.icon ? `<img icon=this.style.display="none" src="${item.icon}">` : ''}</td>
      <td>${item.sex ? '女' : '男'}</td>
      <td>${item.birthday ? item.birthday : ''}</td>
      <td>
        <ul class="right handler">
          <li class="change">
            <i class="layui-icon layui-icon-edit" data-id=${item.id}></i>
          </li>
          <li class="del">
            <i class="layui-icon layui-icon-delete" data-id=${item.id}></i>
          </li>
        </ul>
      </td>
    </tr>
      `
    }).join('')

    document.querySelector('#tbody').innerHTML = str

    fn1(count)

  })

}
fn()

// 分页功能
function fn1(count) {
  // console.log(count)
  laypage.render({
    elem: 'page2',
    count,
    limit: list.limit, //显示数据条数
    curr: list.page, //起始页
    limits: [5, 10, 15, 20, 25],
    layout: ['count', 'limit', 'prev', 'page', 'next', 'skip',],
    jump: function (obj, first) {
      //obj包含了当前分页的所有参数，比如：
      // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
      // console.log(obj.limit); //得到每页显示的条数
      list.limit = obj.limit
      list.page = obj.curr
      //首次不执行
      if (!first) {
        //do something
        fn()
      }
    }
  })
}
// 筛选模块
const btn = document.querySelector('#search')
btn.addEventListener('click',function(e) {
  // 阻止默认行为
  e.preventDefault()

  let username = document.querySelector('#username').value
  let mobile = document.querySelector('#mobile').value
  let sex = +document.querySelector('[name=sex]').value

  console.log(username, mobile,sex)

  list.sex = sex
  list.username = username
  list.mobile = mobile

  list.page = 1

  document.querySelector('#username').value = ''
  document.querySelector('#mobile').value = ''
  document.querySelector('[name=sex]').value = ''
fn()


})

// 删除模块
const handler = document.querySelector('body')
handler.addEventListener('click', function (e) {
  if (e.target.classList.contains('layui-icon-delete')) {
    const id = e.target.dataset.id
    // console.log(id)

    // 发送请求
    axios({
      method: 'get',
      url: `http://124.223.14.236:8060/admin/ydd_user/del?id=${id}`,
      headers: { 'x-token': localStorage.getItem('x-token') }
    }).then(function ({ errmsg, errno }) {
      // console.log(res)
      if (errno) return layer.msg(errmsg, { icon: 5, time: 1000 })
      layer.confirm('确认删除吗?', index => {
        fn()
        layer.msg('删除成功！');
        layer.close(index)
      })

    })
  }

  // 修改模块
  if (e.target.classList.contains('layui-icon-edit')) {
    // alert(11)
    const id = e.target.dataset.id

    let res2 = layer.open({
      type: 1, // page 层类型
      area: ['600px', '500px'],
      title: '修改用户',
      shade: 0.6, // 遮罩透明度
      shadeClose: true, // 点击遮罩区域，关闭弹层
      anim: 0, // 0-6 的动画形式，-1 不开启
      content: `
      <form id="editStrForm" class="layui-form" lay-filter="editText">
<!-- 第一行 分类名称 -->
<div class="layui-form-item openForm" id="usename">
  <label class="layui-form-label">用户名</label>
  <div class="layui-input-block">
    <input type="text" name="username" id="usnname" required lay-verify="required" placeholder="请输入用户名名称" autocomplete="off"
      class="layui-input">
  </div>
</div>
<input type="text" name="id" style="display: none;">
<!-- 第二行 分类别名  -->
<div class="layui-form-item openForm" id="shouJioh">
  <label class="layui-form-label">手机号</label>
  <div class="layui-input-block">
    <input type="text" name="mobile" required lay-verify="required" placeholder="请输入手机号"
      autocomplete="off" class="layui-input">
  </div>
</div>
<!-- 第二行 分类别名  -->
<div class="layui-form-item openForm" id="psd">
  <label class="layui-form-label">密码</label>
  <div class="layui-input-block">
    <input type="password" name="password" placeholder="请输入密码" autocomplete="off"
      class="layui-input">
  </div>
</div>
<div class="layui-form-item" id="sexe">
          <label class="layui-form-label">性别</label>
          <div class="layui-input-block">
           <input type="checkbox" name="sex" lay-skin="switch" lay-text="女|男" value="1"> 
          </div>
</div>

<input type="file" class="file" style=" display: none;">
<div class="layui-form-item icon-upload">
  <button type="button" class="layui-btn" id="test2">
    <i class="layui-icon">&#xe67c;</i>上传图片
  </button>
</div>

<div class="image"style="display: block;"><img src="" id="img" style='width:100px;height:100px'></div>
<!-- 第三行 按钮 -->
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn" lay-submit lay-filter="formDemo">确认</button>
    <button type="reset" id="closes" class="layui-btn layui-btn-primary">取消</button>
  </div>
</div>
</form>
      `
    })
    axios({
      method: 'get',
      url: `http://124.223.14.236:8060/admin/ydd_user/rowInfo?id=${id}`,
      params: id,
      headers: { 'x-token': localStorage.getItem('x-token') }
    }).then(function ({ data: { data } }) {
      // console.log(data)

      const num = form.val('editText', data)
      console.log(num)
      layui.use('upload', function () {
        let upload = layui.upload;
        //执行实例
        var uploadInst = upload.render({
          elem: '#test2', //绑定元素

          url: 'http://124.223.14.236:8060/admin/common/upload?type=images',
          headers: { 'x-token': localStorage.getItem('x-token') },
          done: function ({ data }) {
            // objectURL = URL.createObjectURL(data)
            // console.log(objectURL)
            // console.log(data)
            document.querySelector('#img').src = 'http://124.223.14.236:8060/' + data.savePath
          }
        })

        //   // 提交数据
        document.querySelector('#editStrForm').addEventListener('submit', function (e) {
          e.preventDefault()
          //  发送请求
          axios({
            method: 'post',
            url: 'http://124.223.14.236:8060/admin/ydd_user/update',
            data,
            headers: { 'x-token': localStorage.getItem('x-token') },
          }).then(function(res) {
            console.log(res)
            layer.close(res2)
            fn()
          })

        })
      })

    })

  }
})

// 新增模块
const add = document.querySelector('#addData')
add.addEventListener('click', function () {
  let res2 = layer.open({
    type: 1, // page 层类型
    area: ['500px', '500px'],
    title: '修改用户',
    shade: 0.6, // 遮罩透明度
    shadeClose: true, // 点击遮罩区域，关闭弹层
    anim: 0, // 0-6 的动画形式，-1 不开启
    content: `
    <form id="editStrForm" class="layui-form" lay-filter="editText">
<!-- 第一行 分类名称 -->
<div class="layui-form-item openForm" id="usename">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
  <input type="text" name="username" id="usnname" required lay-verify="required" placeholder="请输入用户名名称" autocomplete="off"
    class="layui-input">
</div>
</div>
<input type="text" name="id" style="display: none;">
<!-- 第二行 分类别名  -->
<div class="layui-form-item openForm" id="shouJioh">
<label class="layui-form-label">手机号</label>
<div class="layui-input-block">
  <input type="text" name="mobile" required lay-verify="required|phone" placeholder="请输入手机号"
    autocomplete="off" class="layui-input">
</div>
</div>
<!-- 第二行 分类别名  -->
<div class="layui-form-item openForm" id="psd">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
  <input type="password" name="password" lay-verify="required|" placeholder="请输入密码" autocomplete="off"
    class="layui-input">
</div>
</div>
<div class="layui-form-item" id="sexe">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
         <input type="checkbox" name="sex" lay-skin="switch" lay-text="女|男" value="1"> 
        </div>
</div>

<input type="file" class="file" style=" display: none;">
<div class="layui-form-item icon-upload">
<button type="button" class="layui-btn" id="test2">
  <i class="layui-icon">&#xe67c;</i>上传图片
</button>
</div>

<div class="image"style="display: block;"><img src="" id="img" style='width:100px;height:100px'></div>
<!-- 第三行 按钮 -->
<div class="layui-form-item">
<div class="layui-input-block">
  <button class="layui-btn affirm" lay-submit lay-filter="formDemo">确认</button>
  <button type="reset" id="closes" class="layui-btn layui-btn-primary">取消</button>
</div>
</div>
</form>
    `
  })
// 图片上传
  layui.use('upload', function () {
    let upload = layui.upload;
    //执行实例
    let uploadInst = upload.render({
      elem: '#test2', //绑定元素
      url: 'http://124.223.14.236:8060/admin/common/upload?type=images',
      headers: { 'x-token': localStorage.getItem('x-token') },
      done: function ({ data }) {
        document.querySelector('#img').src = 'http://124.223.14.236:8060/' + data.savePath


        const form1 = document.querySelector('#editStrForm')

        form1.addEventListener('click', function (e) {
          e.preventDefault()
          if (e.target.classList.contains('affirm')) {

            let username = document.querySelector('#usnname').value
            let mobile = document.querySelector('[name=mobile]').value
            let password = document.querySelector('[name=password]').value
            let sex = +document.querySelector('[name=sex]').value

            console.log(username, mobile, password, sex)
            //  发送请求
            axios({
              method: 'POST',
              url: 'http://124.223.14.236:8060/admin/ydd_user/add',
              data: {
                icon: data.savePath,
                mobile,
                password,
                sex,
                username
              },
              headers: {
                'x-token': localStorage.getItem('x-token')
              }
            }).then(function (res) {
              console.log('1111111');
              console.log(res)
              // fn()
            }).catch(function(err) {
              console.log(err,'eeee');
            })
            layer.close(res2)
            layer.msg('新增成功！');

            fn()
          }
        })

      }
    })
  })


}) 